<template>
	<view class="food-view" v-show="showCom">
		<view class="sub-mask" @click="close"></view>
		<view class="sub-block" v-if="item && item.id">
			<scroll-view class="b-detail" scroll-y :style="'max-height: '+maxHeight+'px;'">
				<view class="b-cover">
					<image :src="item.cover_url" mode="aspectFill" @click="onPreviewPhoto"></image>
					<view class="b-action">
						<view class="iconfont icon-close-fill" @click="close"></view>
					</view>
				</view>
				<view class="b-main">
					<text class="b-title too-long">{{item.name}}</text>
					<view class="b-info">
						<view class="s-price">原价 ¥{{goodsMakertPrice}}</view>
						<view class="b-stat">
							<view class="s-category">{{item.category_name}}</view>
							<view class="s-left">库存 {{item.count_left}}</view>
							<view class="s-sale">销量 {{item.count_sale}}</view>
							<view class="b-opt">
								<view class="s-btn f-like" @click="onHandleLike()">
									<view class="f-yes iconfont icon-like-yes" v-if="item.is_like"></view>
									<view class="f-no iconfont icon-like-no" v-else></view>
								</view>
							</view>
						</view>
					</view>
					<view class="b-specs" v-if="specList.length > 0">
						<view class="b-item" v-for="(item, index) in specList" :key="index">
							<view class="s-title">{{item.name}}(必选)</view>
							<view class="s-items">
								<view class="s-item" v-for="(sItem, sIndex) in item.items" :key="sIndex"
									@click="onChooseSpec(index, sIndex)"
									:class="{'f-active': specChoose[index] == sItem, 'f-disable':specDisable.indexOf(index+'-'+sIndex) !== -1}">
									{{sItem}}
								</view>
							</view>
						</view>
						<view class="b-state" v-if="specItem">剩余{{specItem.count_left}}份</view>
					</view>
					<view class="b-attrs" v-if="attrList.length > 0">
						<view class="b-item" v-for="(item, index) in attrList" :key="index">
							<view class="s-title">{{item.name}}(可选)</view>
							<view class="s-items">
								<view class="s-item" v-for="(sItem, sIndex) in item.items" :key="sIndex"
									@click="onChooseAttr(index, sIndex)"
									:class="{'f-active': attrChoose[index] == sIndex}">
									{{sItem}}
								</view>
							</view>
						</view>
					</view>
					<view class="b-notes" v-if="noteList.length > 0">
						<view class="s-title">备注</view>
						<view class="s-items">
							<view class="s-item" v-for="(item, index) in noteList" :key="index"
								@click="onChooseNote(index)" :class="{'f-active': noteChoose.indexOf(index) !== -1}">
								{{item}}
							</view>
						</view>
					</view>
					<view class="b-addons" v-if="addonList.length > 0">
						<view class="s-title">加菜</view>
						<view class="s-items">
							<view class="s-item" v-for="(item, index) in addonList" :key="index"
								@click="onChooseAddon(index)" :class="{'f-active': addonChoose.indexOf(index) !== -1}">
								{{item.name}}(¥{{item.price}})
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="b-cart" v-if="item.multi_spec">
				<view class="b-choose" v-if="specItem">已选：{{goodsNames}}</view>
				<view class="b-choose" v-else>请选择规格</view>
				<view class="b-amount" v-if="specItem">
					<view class="s-payment" v-if="specItem">
						<view class="s-amount">¥{{totalGoodsPrice}}</view>
						<view class="s-unit">/份</view>
					</view>
					<view class="s-payment" v-else>--</view>
					<view class="b-counter">
						<view class="iconfont icon-minus1" @click="onCounter('dec')"></view>
						<view class="s-num">{{goodsCount}}</view>
						<view class="iconfont icon-plus1" @click="onCounter('inc')"></view>
					</view>
				</view>
				<view class="b-btn" :class="{'f-disable': !specItem}" @click="onAddCart">添加至购物车</view>
			</view>
			<view class="b-cart" v-else>
				<view class="b-choose" v-if="goodsNames">已选：{{goodsNames}}</view>
				<view class="b-amount">
					<view class="s-payment">
						<view class="s-amount">¥{{totalGoodsPrice}}</view>
						<view class="s-unit">/份</view>
					</view>
					<view class="b-counter">
						<view class="iconfont icon-minus1" @click="onCounter('dec')"></view>
						<view class="s-num">{{goodsCount}}</view>
						<view class="iconfont icon-plus1" @click="onCounter('inc')"></view>
					</view>
				</view>
				<view class="b-btn" @click="onAddCart">添加至购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFoodDetail,
		handleLike
	} from '@/service/api/food.js'
	export default {
		name: 'food-view',
		props: {
			item: {
				type: Object,
				default: () => {
					return {
						id: 0
					}
				}
			}
		},
		data() {
			return {
				showCom: false,
				maxHeight: 0,
				groupIndex: -1,
				itemIndex: -1,
				specList: [],
				specDisable: [],
				specChoose: {},
				specItem: null,
				skuList: [],
				attrList: [],
				attrChoose: {},
				noteList: [],
				noteChoose: [],
				addonList: [],
				addonChoose: [],
				goodsData: {
					price: 0,
					market_price: 0,
					spec_data: null,
					attr_list: [],
					note_list: [],
					addon_list: []
				},
				goodsCount: 1
			}
		},
		watch: {
			'item.id': {
				handler(news) {
					if (news) {
						this.initMaxHeight()
						console.log('watch item.id news')
						this.loadDetail()
					}
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			goodsNames() {
				let goodsNames = []
				if (this.goodsData.spec_data) {
					goodsNames.push(this.goodsData.spec_data.spec_text)
				}
				if (this.goodsData.attr_list.length > 0) {
					this.goodsData.attr_list.filter((item, index) => {
						goodsNames.push(item.name + '(' + item.item + ')')
					})
				}
				if (this.goodsData.note_list.length > 0) {
					this.goodsData.note_list.filter((item, index) => {
						goodsNames.push(item)
					})
				}
				if (this.goodsData.addon_list.length > 0) {
					this.goodsData.addon_list.filter((item, index) => {
						goodsNames.push('加' + item.name)
					})
				}
				return goodsNames.join(', ')
			},
			goodsPrice() {
				let goodsPrice = parseFloat(this.goodsData.price)
				if (this.goodsData.spec_data) {
					goodsPrice = parseFloat(this.goodsData.spec_data.price)
				}
				if (this.goodsData.addon_list.length > 0) {
					this.goodsData.addon_list.filter((item, index) => {
						goodsPrice += parseFloat(item.price)
					})
				}
				return goodsPrice
			},
			goodsMakertPrice() {
				let goodsPrice = parseFloat(this.goodsData.market_price)
				if (this.goodsData.spec_data) {
					goodsPrice = parseFloat(this.goodsData.spec_data.market_price)
				}
				if (this.goodsData.addon_list.length > 0) {
					this.goodsData.addon_list.filter((item, index) => {
						goodsPrice += parseFloat(item.market_price)
					})
				}
				return goodsPrice
			},
			totalGoodsPrice() {
				return this.goodsPrice * this.goodsCount
			}
		},
		methods: {
			show() {
				this.showCom = true
			},
			close() {
				this.showCom = false
			},
			loadDetail() {
				this.specList = [
					// {
					// 'id': 18,
					// 'name': '分量',
					// 'items': [
					// 	'大份',
					// 	'小份'
					// 	]
					// }
				]
				this.specDisable = []
				this.specChoose = {}
				this.specItem = null
				this.skuList = [
					// {
					// 	'id': 32,
					// 	'spec_text': '大份,中辣',
					// 	'cover_url': '',
					// 	'market_price': '100.00',
					// 	'price': '100.00',
					// 	'count_left': 100,
					// 	'count_sale': 0
					// }
				]
				this.attrList = [
					// {
					// 	id: 6,
					// 	name: '224',
					// 	items: [
					// 		'112',
					// 		'333'
					// 	]
					// }	
				]
				this.attrChoose = {}
				this.noteList = [
					// '不要香菜',
				]
				this.noteChoose = []
				this.addonList = [
					// {
					// 	'id': 32,
					// 	'name': '啤酒',
					// 	'market_price': '100.00',
					// 	'price': '100.00',
					// 	'count_left': 100,
					// 	'count_sale': 0,
					//  'goods_count': 0
					// }
				]
				this.addonChoose = []
				this.goodsData = {
					price: this.item.price,
					market_price: this.item.market_price,
					spec_data: null,
					attr_list: [],
					note_list: [],
					addon_list: []
				}
				this.goodsCount = 1
				getFoodDetail(this.item.id).then(([err, res]) => {
					console.log('getFoodDetail', err, res)
					if (!err) {
						this.loadingType = -1
						this.specList = res.spec_list
						this.skuList = res.sku_list
						this.attrList = res.attr_list
						this.noteList = res.note_list
						this.addonList = res.addon_list
						if (this.specList.length == 1) {
							let specDisable = []
							for (let i = 0; i < this.specList[0].items.length; i++) {
								const specItem = this.specList[0].items[i]
								let canBuy = false
								for (let j = 0; j < this.skuList.length; j++) {
									const item = this.skuList[j]
									if (item.spec_text == specItem) {
										if (item.count_left > 0 && item.state == 1) {
											canBuy = true
											break
										}
									}
								}
								if (!canBuy) {
									specDisable.push(0 + '-' + i)
								}
							}
							this.specDisable = specDisable
							console.log('init specDisable', this.specDisable)
						}
					} else {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
				})
			},
			onPreviewPhoto() {
				uni.previewImage({
					current: 0,
					urls: [this.item.cover_url]
				})
			},
			onHandleLike() {
				var action = this.item.is_like ? 'no' : 'yes'
				handleLike(this.item.id, action).then(([err, res]) => {
					console.log('handleLike', err, res)
					if (!err) {
						if (action === 'yes') {
							this.item.is_like = 1
						} else {
							this.item.is_like = 0
						}
						this.$logic.showToast('操作成功')
					}
				})
			},
			onChooseSpec(groupIndex, itemIndex) {
				console.log('onChooseSpec', groupIndex, itemIndex, this.groupIndex)
				if (this.specDisable.indexOf(groupIndex + '-' + itemIndex) !== -1) {
					return
				}
				if (this.specChoose[groupIndex] == itemIndex) {
					let specChoose = {}
					for (let key in this.specChoose) {
						if (key < groupIndex) {
							specChoose[key] = this.specChoose[key]
						}
					}
					this.specChoose = specChoose
					let specDisable = []
					this.specDisable.filter((item) => {
						const arr = item.split('-')
						if (arr[0] <= groupIndex) {
							specDisable.push(item)
						}
					})
					this.specDisable = specDisable
					this.specItem = null
					this.goodsData.spec_data = null
					this.groupIndex = groupIndex - 1
					this.itemIndex = -1
					return
				}
				const offset = groupIndex - this.groupIndex
				if (offset > 0) {
					if (offset > 1) {
						return
					}
				} else {
					let specChoose = {}
					for (let key in this.specChoose) {
						if (key <= groupIndex) {
							specChoose[key] = this.specChoose[key]
						}
					}
					this.specChoose = specChoose
					let specDisable = []
					this.specDisable.filter((item) => {
						const arr = item.split('-')
						if (arr[0] <= groupIndex + 1) {
							specDisable.push(item)
						}
					})
					this.specDisable = specDisable
					this.specItem = null
					this.goodsData.spec_data = null
				}
				this.groupIndex = groupIndex
				this.itemIndex = itemIndex
				this.specChoose[groupIndex] = this.specList[groupIndex].items[itemIndex]
				console.log('specChoose', this.specChoose)
				if (groupIndex < this.specList.length - 1) {
					let specDisable = []
					const groupSpecItem = this.specList[groupIndex].items[itemIndex]
					for (let i = 0; i < this.specList[groupIndex + 1].items.length; i++) {
						const specItem = this.specList[groupIndex + 1].items[i]
						let canBuy = false
						for (let j = 0; j < this.skuList.length; j++) {
							const item = this.skuList[j]
							const arr = item.spec_text.split(',')
							if (arr[groupIndex] == groupSpecItem && arr[groupIndex + 1] == specItem) {
								if (item.count_left > 0 && item.state == 1) {
									canBuy = true
									break
								}
							}
						}
						if (!canBuy) {
							specDisable.push(groupIndex + 1 + '-' + i)
						}
					}
					this.specDisable = specDisable
					console.log('specDisable', this.specDisable)
				} else {
					for (let j = 0; j < this.skuList.length; j++) {
						const item = this.skuList[j]
						const arr = item.spec_text.split(',')
						let found = true
						for (let k = 0; k < arr.length; k++) {
							if (arr[k] != this.specChoose[k]) {
								found = false
								break
							}
						}
						if (found) {
							console.log('found', item)
							this.specItem = item
							this.goodsData.spec_data = item
							break
						}
					}
				}
			},
			onChooseAttr(groupIndex, itemIndex) {
				console.log('onChooseAttr', groupIndex, itemIndex)
				if (this.attrChoose[groupIndex] == itemIndex) {
					delete this.attrChoose[groupIndex]
					let sIndex = -1
					this.goodsData.attr_list.filter((item, index) => {
						if (item.id == this.attrList[groupIndex].id &&
							item.item == this.attrList[groupIndex].items[itemIndex]) {
							sIndex = index
							return
						}
					})
					if (sIndex !== -1) {
						this.goodsData.attr_list.splice(sIndex, 1)
					}
				} else {
					this.attrChoose[groupIndex] = itemIndex
					let sIndex = -1
					this.goodsData.attr_list.filter((item, index) => {
						if (item.id == this.attrList[groupIndex].id) {
							sIndex = index
							return
						}
					})
					const attrData = this.attrList[groupIndex]
					if (sIndex !== -1) {
						this.goodsData.attr_list[sIndex].item = attrData.items[itemIndex]
					} else {
						this.goodsData.attr_list.push({
							id: attrData.id,
							name: attrData.name,
							item: attrData.items[itemIndex]
						})
					}
				}
				console.log('attrChoose', this.attrChoose)
			},
			onChooseNote(index) {
				console.log('onChooseNote', index)
				const sIndex = this.noteChoose.indexOf(index)
				if (sIndex !== -1) {
					this.noteChoose.splice(sIndex, 1)
					this.goodsData.note_list.splice(sIndex, 1)
				} else {
					this.noteChoose.push(index)
					this.goodsData.note_list.push(this.noteList[index])
				}
			},
			onChooseAddon(index) {
				console.log('onChooseAddon', index)
				const sIndex = this.addonChoose.indexOf(index)
				if (sIndex !== -1) {
					this.addonChoose.splice(sIndex, 1)
					this.goodsData.addon_list.splice(sIndex, 1)
				} else {
					this.addonChoose.push(index)
					this.goodsData.addon_list.push(this.addonList[index])
				}
			},
			onCounter(type) {
				if (type === 'inc') {
					this.goodsCount++
				} else if (type === 'dec') {
					if (this.goodsCount > 1) {
						this.goodsCount--
					}
				}
			},
			onAddCart() {
				console.log('com onAddCart', this.item.id)
				if (this.item.multi_spec && !this.specItem) {
					return
				}
				let goodsCover = this.item.cover_url
				if (this.goodsData.spec_data) {
					if (this.goodsData.spec_data.cover_url) {
						goodsCover = this.goodsData.spec_data.cover_url
					}
				}
				this.$emit('addCart', {
					goods_id: this.item.id,
					goods_name: this.item.name,
					goods_names: this.goodsNames,
					goods_cover: goodsCover,
					goods_price: this.goodsPrice,
					goods_data: this.goodsData,
					goods_count: this.goodsCount
				})
				this.close()
			},
			initMaxHeight() {
				if (!this.maxHeight) {
					const systemInfo = uni.getSystemInfoSync()
					this.maxHeight = systemInfo.windowHeight - this.$logic.rpx2px(250) - this.$logic.rpx2px(50)
					console.log('initMaxHeight', systemInfo, this.maxHeight)
				}
			}
		}
	};
</script>

<style lang="scss">
	.sub-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.6);
	}

	.sub-block {
		position: fixed;
		left: 0upx;
		// #ifdef MP-WEIXIN
		bottom: 0;
		// #endif
		// #ifdef H5
		bottom: 100upx;
		// #endif
		z-index: 1000;
		background: #fff;
		width: 750upx;

		.b-detail {
			.b-cover {
				position: relative;
				width: 750upx;
				height: 500upx;

				image {
					width: 750upx;
					height: 500upx;
				}

				.b-action {
					position: absolute;
					top: 20upx;
					right: 20upx;

					.iconfont {
						font-size: 50upx;
						color: rgba($color: #000000, $alpha: 0.4);
					}
				}
			}

			.b-main {
				padding: 20upx 20upx 20upx 20upx;

				.b-title {
					font-size: 30upx;
					color: #333;
				}

				.b-info {
					margin-top: 10upx;
					display: flex;
					align-items: center;
					justify-content: space-between;


					.s-price {
						font-size: 26upx;
						color: #555;
					}

					.b-stat {
						display: flex;
						align-items: center;

						.s-num {
							margin: 0 10upx;
						}

						.s-like {
							font-size: 24upx;
							color: #999;
						}

						.s-category {
							font-size: 24upx;
							color: #666;
						}

						.s-left {
							margin-left: 20upx;
							font-size: 24upx;
							color: #999;
						}

						.s-sale {
							margin-left: 20upx;
							font-size: 24upx;
							color: #999;
						}

						.b-opt {
							display: flex;
							align-items: center;

							.s-btn {
								margin-left: 20upx;
								font-size: 50upx;

								&.f-like {
									.f-yes.iconfont {
										color: #DA5650;
									}
								}
							}

							.iconfont {
								font-size: 40upx;
								color: #999;
							}
						}
					}
				}
			}

			.b-specs {
				margin-top: 50upx;

				.b-item {
					padding-bottom: 20upx;
					margin-top: 20upx;

					.s-title {
						color: #333;
						font-size: 28upx;
						font-weight: bold;
					}

					.s-items {
						margin-top: 10upx;
						display: flex;
						align-items: center;
						// flex-wrap: wrap;

						.s-item {
							margin-right: 20upx;
							padding: 10upx 20upx;
							color: #666;
							background: #eee;
							font-size: 26upx;

							&.f-active {
								color: #fff;
								background: #dd524d;
							}

							&.f-disable {
								color: #888;
								background: #ccc;
							}
						}
					}
				}

				.b-state {
					color: #dd524d;
					font-size: 26upx;
				}
			}

			.b-attrs {
				.b-item {
					padding-bottom: 20upx;
					margin-top: 20upx;

					.s-title {
						color: #333;
						font-size: 28upx;
						font-weight: bold;
					}

					.s-items {
						margin-top: 10upx;
						display: flex;
						align-items: center;
						// flex-wrap: wrap;

						.s-item {
							margin-right: 20upx;
							padding: 10upx 20upx;
							color: #666;
							background: #eee;
							font-size: 26upx;

							&.f-active {
								color: #fff;
								background: #dd524d;
							}
						}
					}
				}
			}

			.b-notes {
				margin-top: 20upx;

				.s-title {
					color: #333;
					font-size: 28upx;
					font-weight: bold;
				}

				.s-items {
					margin-top: 10upx;
					display: flex;
					align-items: center;
					// flex-wrap: wrap;

					.s-item {
						margin-right: 20upx;
						padding: 10upx 20upx;
						color: #666;
						background: #eee;
						font-size: 26upx;

						&.f-active {
							color: #fff;
							background: #dd524d;
						}
					}
				}
			}

			.b-addons {
				margin-top: 20upx;

				.s-title {
					color: #333;
					font-size: 28upx;
					font-weight: bold;
				}

				.s-items {
					margin-top: 10upx;
					display: flex;
					align-items: center;
					// flex-wrap: wrap;

					.s-item {
						margin-right: 20upx;
						padding: 10upx 20upx;
						color: #666;
						background: #eee;
						font-size: 26upx;

						&.f-active {
							color: #fff;
							background: #dd524d;
						}
					}
				}
			}
		}

		.b-cart {
			padding-bottom: 50upx;
			width: 750upx;
			background: #fff;
			border-top: 1upx solid #eee;

			.b-choose {
				padding: 0 20upx;
				height: 60upx;
				line-height: 60upx;
				font-size: 24upx;
				color: #666;
				background: #eee;
			}

			.b-amount {
				padding: 0 20upx;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.s-payment {
					font-size: 30upx;
					color: #dd524d;
					display: flex;
					align-items: center;

					.s-amount {
						font-size: 36upx;
						font-weight: bold;
					}

					.s-unit {
						font-size: 28upx;
					}
				}

				.b-counter {
					display: flex;
					align-items: center;

					.iconfont {
						font-size: 44upx;
						color: #DA5650;
					}

					.s-num {
						width: 50upx;
						text-align: center;
						font-size: 30upx;
						color: #333;
					}
				}
			}

			.b-btn {
				margin: 20upx 20upx 0 20upx;
				width: 710upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				background: #EC9C4E;
				border-radius: 40upx;
				font-size: 28upx;
				color: #fff;
				letter-spacing: 2upx;

				&.f-disable {
					background: rgba(218, 86, 80, 0.8)
				}
			}
		}
	}
</style>
